<template>
  <div>
    <hade />
    <div
      v-for="(item, index) in blogList"
      :key="index"
      class="search-content fade-in-top"
    >
      <div class="content">
        <h1
          @click="
            () => {
              $router.push({
                path: '/details/blog',
                query: { id: encodeURIComponent(item.id) },
              })
            }
          "
        >
          {{ item.title }}
        </h1>

        <a-tag color="blue">
          <a-icon type="tags" theme="filled" />vue
        </a-tag>
        <a-tag color="purple">
          <a-icon type="history" />{{timeFormatsss(item.datetime)}}
        </a-tag>
        <a-tag v-if="item.fingerprint && visitorId === item.fingerprint" color="red" style="cursor: pointer;" @click="updayeBlog(item)">
          修改
        </a-tag>
        <div class="search-content-img">
          <div class="imglist">
            <div class="imgtow">
              <Images  v-for="(i, urlIindex) in item.cover"  :key="urlIindex"   :src="i" />
              <!-- <Images
                src="https://images.unsplash.com/photo-1587367336516-887f58881b13?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
                style="padding-left: 1rem"
              />
              <Images
                src="https://images.unsplash.com/photo-1637179295879-e114d19fce11?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMnx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
                style="padding-left: 1rem"
              /> -->
            </div>
          </div>
          <div class="textMSg">
            {{ item.txt }}
          </div>
        </div>
      </div>
    </div>
    <a-pagination
      style="text-align: center"
      show-size-changer
      :default-current="pageNo"
      :total="totalCont"
      @change="changePage"
    />
  </div>
</template>

<script>
  import mixins from '@/mixins/mixins'
  import { getlits } from '../api/api'
export default {
  mixins:[mixins],
  async asyncData() {
    const { dataList, totalCont } = await getlits()
    const listfilter = dataList.map((item) => {
      item.cover = item.cover.filter(Boolean)
      return item
    })
    return {
      blogList: listfilter,
      totalCont,
    }
  },
  data() {
    return {
      blogList: [],
      totalCont: 0,
      pageSize: 20,
      pageNo: 1,
      visitorId:'',
    }
  },
  create() {
    this.$nuxt.$loading.start()
  },
  async mounted() {
    this.$nextTick(() => {
      this.$nuxt.$loading.finish()
      // setTimeout(() => , 500)
    })

    const {visitorId} = await this.getBrowserFingerprint()
    this.visitorId = visitorId
    console.log(visitorId)
  },
  methods: {
    /***
     * 修改博客
     * @param data
     */
    updayeBlog(data){
      console.log(data)
      this.$router.push({
        path: '/md',
        query: { id:data.id,fingerprint:data.fingerprint, },
      })
    },
    async changePage(page, pageSize) {
      console.log(page, pageSize)
      // this.pageSize = pageSize
      // this.pageNo = page

      const { dataList, totalCont } = await getlits({ pageSize, pageNo: page })
      this.blogList = [...this.blogList, ...dataList]
      this.totalCont = totalCont
    },
  },
}
</script>
<style lang="less" scoped>
.search {
  width: 60%;
  height: 200px;
  margin: auto;
  display: flex;
  align-items: center;
}
.search-content {
  width: 70%;
  height: 200px;
  margin: auto;
  display: flex;
  align-items: center;
  .textMSg {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
  }
  .content {
    width: 100%;
    overflow: hidden;
  }
}

h1:hover {
  color: #1890ff;
  cursor: pointer;
}
.search-content-img {
  display: flex;

  .imgtow {
    display: flex;
  }
}

.fade-in-top {
  -webkit-animation: fade-in-top 0.6s cubic-bezier(0.39, 0.575, 0.565, 1);
  animation: fade-in-top 0.6s cubic-bezier(0.39, 0.575, 0.565, 1);
}

@-webkit-keyframes fade-in-top {
  0% {
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in-top {
  0% {
    -webkit-transform: translateY(-50px);
    transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
</style>
